<template>
    <div class="app">
        <div class="left">
            <el-menu
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
            >
                <template v-for="item in List">
                    <el-submenu
                        :index="item.path"
                        v-if="item.children && item.children.length > 0"
                        :key="item.path"
                    >
                        <template slot="title">
                            <i :class="item.meta.icon"></i>
                            <span>{{ item.meta.title }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item
                                v-for="(v, indexs) in item.children"
                                :key="`${item.path}-${indexs}`"
                                :index="
                                    `${item.path}/${v.path}`.replace('//', '/')
                                "
                                @click="
                                    handleRouteClick(
                                        `${item.path}/${v.path}`.replace(
                                            '//',
                                            '/'
                                        )
                                    )
                                "
                            >
                                {{ v.meta.title }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item
                        :index="item.path"
                        v-else
                        :key="item.path"
                        @click="handleRouteClick(item.path)"
                    >
                        <i :class="item.meta.icon"></i>
                        <span slot="title">{{ item.meta.title }}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import { getRouters } from '@/api/login'
import router from '@/router'

export default {
    name: 'AppLayout',
    data() {
        return {
            List: []
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        handleRouteClick(path) {
            this.$router.push({ path })
        },
        addRoutes(routes) {
            routes.forEach((route) => {
                const routeConfig = {
                    path: route.path,
                    name: route.name,
                    component: this.resolveComponent(route.component)
                }

                if (route.children && route.children.length > 0) {
                    routeConfig.children = []
                    route.children.forEach((child) => {
                        routeConfig.children.push({
                            path: child.path,
                            name: child.name,
                            component: this.resolveComponent(child.component)
                        })
                    })
                }

                router.addRoute(routeConfig)
            })
        },
        resolveComponent(componentPath) {
            return () =>
                import(`@/views/${componentPath}.vue`).catch((error) => {
                    console.error(`Component not found: ${componentPath}`, error)
                    return null
                })
        }
    },
    mounted() {
        getRouters().then((res) => {
            if (res.data.code === 200) {
                this.List = res.data.data

                console.log(res.data.data)
                this.addRoutes(res.data.data)
            }
        })
    }
}
</script>
<style scoped>
.app {
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow: auto;
}
.left {
    width: 200px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #545c64;
    color: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    overflow: auto;
}

.el-menu-vertical-demo {
    border-right: none;
}

.el-menu-item,
.el-submenu__title {
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.el-menu-item:hover,
.el-submenu__title:hover {
    background-color: #6d7a85;
}

.el-menu-item.is-active {
    background-color: #ffd04b;
    color: #333;
}
.right {
    flex: 1;
    margin-left: 200px;
    background: #eee;
}
</style>